<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <rect x="30" y="30" width="40" height="40" fill="none" stroke="#00f"/>

        <circle cx="30" cy="30" r="3" fill="#f00" fill-opacity="0.8">
            <animate attributeType="XML"
                attributeName="cx"
                values="30;70;70;30"
                dur="3"
                fill="freeze"/>

            <animate attributeType="XML"
                attributeName="cy"
                values="30;70;70;30"
                dur="3"
                begin="1s"
                fill="freeze"/>    
        </circle>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <path d="M20 50 A30 30 0 0 1 80 50A30 30 0 0 1 20 50"
            fill="none" stroke="#00f" />

        <circle cx="20" cy="50" r="3" fill="#f00" fill-opacity="0.8">
            <animateMotion 
                origin="0,0"
                begin="1s"
                path="M20 50 A30 30 0 0 1 80 50A30 30 0 0 1 20 50"
                dur="2s"  fill="freeze">
            </animateMotion>
        </circle>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <path d="M0 0 L100 100"
            fill="none" stroke="#00f" />

        <circle cx="0" cy="0" r="3" fill="#f00" fill-opacity="0.8">
            <animateMotion path="M0 0 L100 100"
                begin="1s" dur="2s" fill="freeze">
                
            </animateMotion>
        </circle>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <path d="M0 0 C0 100 100 0 100 100"
            fill="none" stroke="#00f" />

        <circle cx="0" cy="0" r="3" fill="#f00" fill-opacity="0.8">
            <animateMotion path="M0 0 C0 100 100 0 100 100"
                keyPoints="0;1"
                keyTimes="0;1"
                calcMode="spline"
                keySplines="0 1 1 0"
                begin="1s" dur="2s" fill="freeze">
                
            </animateMotion>
        </circle>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <path d="M0 0 C100 0 0 100 100 100"
            fill="none" stroke="#00f" />

        <circle cx="0" cy="0" r="3" fill="#f00" fill-opacity="0.8">
            <animateMotion path="M0 0 C100 0 0 100 100 100"
                keyPoints="0;1"
                keyTimes="0;1"
                calcMode="spline"
                keySplines="1 0 0 1"
                begin="1s" dur="2s" fill="freeze">
                
            </animateMotion>
        </circle>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <path d="M20 50 A20 20 0 0 1 60 50A20 20 0 0 1 20 50"
            fill="none" stroke="#00f" />

        <rect x="0" y="0" width="5" height="5" fill="#f00" fill-opacity="0.8" >
            <animateMotion 
                path="M20 50 A20 20 0 0 1 60 50A20 20 0 0 1 20 50"
                rotate="auto-reverse"
                dur="4s"  fill="freeze">
            </animateMotion>
        </rect>
       
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <path id="d1" d="M20 50 A30 30 0 0 1 80 50 L50 90 Z"
            fill="none" stroke="#00f" />

        <rect x="0" y="0" width="5" height="5" fill="#f00" fill-opacity="0.8" >
            <animateMotion 
                rotate="auto-reverse"
                dur="4s"  fill="freeze">
                <mpath href="#d1"/>
            </animateMotion>
        </rect>
       
    </svg>




    <script src="index.js"></script>
  </body>
</html>
